/**
 * @file PC端侧边栏导航样式
 */
@charset "UTF-8";

// [最终修复] 修正 SCSS 内部的别名引用，改用相对路径，消除对外部构建环境的依赖
@use '../../variables' as *;
@use 'sass:color';

// 侧边栏导航的基本样式
.axiom-pc-sidebar-nav {
  // padding: var(--spacing-md); // 移除此处的 padding，因为它导致所有内容向右偏移
  
  .sidebar-title {
    font-size: var(--font-size-lg);
    font-weight: var(--axiom-pc-sidebar-nav-title-weight, 600);
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--text-color-primary);
  }

  ul, .nav-list {
    list-style: none;
    padding: 0; // 重置来自 base.scss 的全局 padding
    margin: 0;
  }

  .nav-item-wrapper {
    // 基础样式
  }

  .nav-item {
    display: flex;
    align-items: center;
    padding: var(--axiom-pc-sidebar-nav-item-padding, 12px 20px);
    cursor: pointer;
    transition: var(--axiom-pc-sidebar-nav-item-transition, background-color 0.2s, color 0.2s);
    position: relative; // 为了箭头定位

    &:hover {
      background-color: var(--primary-color-light);
    }

    &.is-active {
      background-color: var(--primary-color);
      color: var(--bg-color);
      font-weight: var(--axiom-pc-sidebar-nav-item-active-weight, 600);
    }
  }

  .nav-icon {
    width: var(--axiom-pc-sidebar-nav-icon-width, 24px);
    margin-right: var(--axiom-pc-sidebar-nav-icon-margin-right, 12px);
    text-align: center;
  }

  .nav-text {
    flex-grow: 1;
    white-space: nowrap;
  }

  .nav-arrow {
    transition: var(--axiom-pc-sidebar-nav-arrow-transition, transform 0.3s ease);
  }

  .is-open > .nav-item > .nav-arrow {
    transform: var(--axiom-pc-sidebar-nav-arrow-open-transform, rotate(180deg));
  }

  .nav-submenu {
    list-style: none;
    // 不再使用 padding-left for indentation
    overflow: hidden;
    max-height: 0;
    transition: var(--axiom-pc-sidebar-nav-submenu-transition, max-height 0.3s ease-in-out);

    // 新增：直接为子菜单项增加缩进
    .nav-item {
      padding-left: var(--axiom-pc-sidebar-nav-submenu-item-padding-left, 44px);
    }
  }
  
  // 展开动画
  & .is-open > .nav-submenu {
      max-height: var(--axiom-pc-sidebar-nav-submenu-open-max-height, 500px); // 设定一个足够大的值
  }

  // 折叠时的样式
  &.is-collapsed {
    .nav-item {
      justify-content: center;
    }
    .nav-icon {
      margin-right: 0;
    }
  }
}

// 过渡动画类
.nav-submenu-transition-enter-active,
.nav-submenu-transition-leave-active {
  transition: var(--axiom-pc-sidebar-nav-submenu-anim-transition, all 0.3s ease-in-out);
}
.nav-submenu-transition-enter-from,
.nav-submenu-transition-leave-to {
  max-height: 0;
  opacity: var(--axiom-pc-sidebar-nav-submenu-anim-opacity-start, 0);
}

html.theme-cyberpunk .axiom-pc-sidebar-nav {
  .sidebar-title {
    color: var(--text-color-secondary);
    text-shadow: 0 0 3px var(--text-color-secondary);
  }

  .nav-item {
    &.is-active {
      background: var(--primary-color-hover);
      color: var(--text-color);
      box-shadow: var(--secondary-glow);
    }
    
    &:hover:not(.is-active) {
      background-color: var(--primary-color-light);
      color: var(--primary-color);
    }
  }
} 

html.theme-neon .axiom-pc-sidebar-nav,
html.theme-rainbow-cyber .axiom-pc-sidebar-nav {
  .sidebar-title {
    color: var(--text-color-secondary);
    text-shadow: 0 0 3px var(--text-color-secondary);
  }

  .nav-item {
    &.is-active {
      background: var(--primary-color-hover);
      color: var(--text-color);
      box-shadow: var(--secondary-glow);
    }
    
    &:hover:not(.is-active) {
      background-color: var(--primary-color-light);
      color: var(--primary-color);
    }
  }
} 